<template>
    <view class="menu-item" :style="itemStyle" @click="handleSelectMenu">
        <view class="icon-area">
            <al-u-icon :icon="menuItem.icon" />
        </view>
        <view class="menu-area">
            {{ menuItem.name }}
        </view>
    </view>
</template>
<script>
    import { defineComponent, computed } from 'vue'
    import { handleRedirectForNav } from '@/utils/common'
    import AlUIcon from './icon'

    export default defineComponent({
        name: 'AlMenuItem',
        components: { AlUIcon },
        props: {
            selectedKeys: {
                type: String || Number,
                default: ''
            },
            menuItem: {
                type: Object,
                default: () => ({})
            },
            showArrow: {
                type: Boolean,
                default: true
            },
            arrowColor: {
                type: String,
                default: '#aeb4c0'
            },
            backgroundColor: {
                type: String,
                default: '#ffffff'
            },
            color: {
                type: String,
                default: '#ffffff'
            },
            selectedBackgroundColor: {
                type: String,
                default: '#e4f1ff'
            },
            selectedColor: {
                type: String,
                default: '#1890ff'
            }
        },
        setup(props) {
            const isActive = computed(() => {
                return props.menuItem.menuId === props.selectedKeys
            })
            const itemStyle = computed(() => {
                return isActive.value
                    ? {
                          backgroundColor: props.selectedBackgroundColor,
                          color: props.selectedColor
                      }
                    : {
                          backgroundColor: props.backgroundColor,
                          color: props.color
                      }
            })
            const handleSelectMenu = () => {
                let contentSetting = props?.menuItem?.contentSetting;
                if (contentSetting.settingType === 'FAKE_ALLIN_RESOURCE_MENU') {
                    handleRedirectForNav(contentSetting.settingId, '/pages/process/Workbench');
                } else if (contentSetting && contentSetting.settingId) {
                    handleRedirectForNav(contentSetting.settingId, null, contentSetting.settingType);
                } else {
                    console.log('Error for wrong url.');
                }
            };
            return {
                itemStyle,
                handleSelectMenu
            }
        }
    })
</script>
<style lang="less" scoped>
    .menu-item {
        padding: 30rpx;
        display: flex;
        align-items: center;
        .icon-area {
            width: 32rpx;
            margin-right: 24rpx;
        }
    }
</style>
